<template>
	<div class="home">
		<Home-header></Home-header>
		<Home-swiper :swiperList="swiperList"></Home-swiper>
		<Home-icon :iconList="iconList"></Home-icon>
		<Home-recommend :recommendList="recommendList"></Home-recommend>
		<Home-favorite :FavoiteList="FavoiteList"></Home-favorite>
		<Home-weekend :weekendList="weekendList"></Home-weekend>
	</div>
</template>

<script>
	import HomeHeader from './components/HomeHeader'
	import HomeSwiper from './components/HomeSwiper.vue'
	import HomeIcon from './components/HomeIcon.vue'
	import HomeRecommend from './components/HomeRecommend.vue'
	import HomeFavorite from './components/HomeFavorite.vue'
	import HomeWeekend from './components/HomeWeekend.vue'
	import axios from 'axios'
	import request from '../../unit/request.js'
	import { mapState } from 'vuex'

	export default {
		name:'Home',
		components:{
			HomeHeader,
			HomeSwiper,
			HomeIcon,
			HomeRecommend,
			HomeFavorite,
			HomeWeekend
		},
		data(){
			return {
				lastCity:'',
				swiperList:[],
				iconList:[],
				recommendList:[],
				FavoiteList:[],
				weekendList:[]
			}
		},
		mounted(){
			this.lastCity=this.city
			this.getHomeInfo();
		},
		activated(){
			if (this.lastCity!==this.city) {
				this.getHomeInfo();
				this.lastCity=this.city
			}
		},
		computed:{
			...mapState(['city'])
		},
		methods:{
			getHomeInfo(){
				request({
					url:'/static/index.json',
					method: 'get',
					params:{
						city:this.city
					}
				}).then(this.getHomeInfoSucc)
			},
			getHomeInfoSucc(res){
				console.log(res);
				var data=res.data.data;
				if(data){
					this.swiperList=data.swiperList
					this.iconList=data.iconList
					this.recommendList=data.recommendList;
					this.FavoiteList=data.favoiteList;
					this.weekendList=data.weekendList
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.home
		background:#f0f0f0
</style>